<template>
  <view class="company-detail-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back.png"></image>
      </view>
      <text class="page-title">公司详情</text>
    </view>
    <view class="company-header">
      <image :src="company.logo || ''" class="company-logo" />
      <view class="company-info">
        <view class="company-name">{{ company.company || '加载中...' }}</view>
        <view class="company-type">{{ company.type || '' }}</view>
      </view>
    </view>
    <view class="company-tags">
      <text v-for="(tag, i) in (company && company.tags ? company.tags.slice(0, 4) : [])" :key="i" class="tag">{{ tag }}</text>
    </view>
    <view class="company-labels">
      <text v-for="(label, i) in (company && company.labels ? company.labels.slice(0, 4) : [])" :key="i" class="label">{{ label }}</text>
    </view>
    <view v-for="(sec, idx) in (company && company.detailSections ? company.detailSections : [])" :key="idx" class="section">
      <view class="section-title">{{ sec.title || '' }}</view>
      <view class="section-content">{{ sec.content || '' }}</view>
    </view>
   
  </view>
</template>

<script>
export default {
  data() {
    return {
      company: {
        id: '',
        logo: '',
        company: '',
        recruitType: '',
        tags: [],
        labels: [],
        date: '',
        cities: [],
        type: '',
        intro: '',
        bizInfo: '',
        jobs: [],
        detailSections: []
      }
    }
  },
  onLoad(options) {
    const id = options.id;
    this.fetchCompanyDetail(id);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    async fetchCompanyDetail(id) {
      // 先设置默认数据，避免渲染错误
      this.company = {
        id: id || '',
        logo: '',
        company: '',
        recruitType: '',
        tags: [],
        labels: [],
        date: '',
        cities: [],
        type: '',
        intro: '',
        bizInfo: '',
        jobs: [],
        detailSections: []
      };
      
      // ===== TODO: ↓↓↓ 以下 mock 数据请替换为实际接口请求 ↓↓↓ =====
      // 模拟所有岗位数据（与首页一致）
      const allJobs = [
        {
          id: 'job1',
          title: '小红书-用户产品经理',
          salary: '18-42k*16',
          company: '小红书',
          tags: ['文娱', '999人', '2025届'],
          date: '2025-4',
          location: '北京石景山',
          views: 450,
          jobType: ['IT/互联网'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job2',
          title: '小红书-前端开发工程师',
          salary: '25-45k*16',
          company: '小红书',
          tags: ['互联网', '10000人以上', '2025届', 'React', 'Node.js'],
          date: '2025-5',
          location: '北京',
          views: 1280,
          jobType: ['IT/互联网'],
          experience: '3-5年',
          education: '硕士',
          companyId: 'company1'
        },
        {
          id: 'job3',
          title: '腾讯-游戏策划',
          salary: '15-30k*16',
          company: '腾讯',
          tags: ['游戏', '5000人', '2025届', '王者荣耀'],
          date: '2025-5',
          location: '深圳南山',
          views: 980,
          jobType: ['游戏'],
          experience: '应届',
          education: '本科',
          companyId: 'company3'
        },
        {
          id: 'job4',
          title: '阿里巴巴-Java后端开发',
          salary: '22-45k*16',
          company: '阿里巴巴',
          tags: ['云计算', '10000人以上', 'P6', '分布式'],
          date: '2025-4',
          location: '浙江杭州',
          views: 1500,
          jobType: ['IT/互联网'],
          experience: '5年以上',
          education: '博士',
          companyId: 'company4'
        },
        {
          id: 'job5',
          title: '小红书-增长数据分析师',
          salary: '18-30k*16',
          company: '小红书',
          tags: ['数据', 'Python', 'BI'],
          date: '2025-5',
          location: '上海浦东',
          views: 620,
          jobType: ['数据'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job6',
          title: '小红书-视觉设计实习生',
          salary: '6-8k*12',
          company: '小红书',
          tags: ['设计', '实习', 'UI'],
          date: '2025-5',
          location: '北京朝阳',
          views: 330,
          jobType: ['设计'],
          experience: '应届',
          education: '大专',
          companyId: 'company1'
        },
        {
          id: 'job7',
          title: '小红书-后端开发 GO',
          salary: '20-35k*16',
          company: '小红书',
          tags: ['Go', '微服务', '容器'],
          date: '2025-6',
          location: '武汉光谷',
          views: 410,
          jobType: ['IT/互联网'],
          experience: '3-5年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job8',
          title: '小红书-产品运营',
          salary: '12-18k*14',
          company: '小红书',
          tags: ['运营', '新媒体', '增长'],
          date: '2025-6',
          location: '广州天河',
          views: 540,
          jobType: ['运营'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        }
        // ...可继续补充更多岗位
      ];
      // 只取当前公司id的岗位
      const jobs = allJobs.filter(job => job.companyId === id);
      // 其它公司信息mock
      const mockData = {
        id: id,
        company: '小红书',
        logo: 'https://img1.baidu.com/it/u=1739539544,3582138974&fm=253&fmt=auto&app=120&f=PNG?w=243&h=243',
        title: '小红书春季招聘',
        recruitType: '春招正式批',
        tags: ['2025届', '商业化', '社交产品', '高薪岗位'],
        date: '2025.4.15~06.07',
        cities: ['北京', '上海', '湖北', '江苏'],
        type: '互联网上市公司',
        intro: '小红书是一家生活方式分享平台，致力于帮助用户发现和分享美好生活。',
        bizInfo: '注册资本：1亿人民币\n法定代表人：张三\n成立日期：2013-06-06\n企业类型：有限责任公司',
        jobs: jobs
      };
      // 计算招聘省市
      const locations = jobs.map(j=>j.location?.replace(/市|区|县|镇|乡|自治州|自治区|特别行政区|省/g,'').trim()).filter(Boolean);
      const uniqueLocs = Array.from(new Set(locations));
      const recruitStr = uniqueLocs.join('、');

      mockData.detailSections = [
        { title: '公司介绍', content: mockData.intro },
        { title: '工商信息', content: mockData.bizInfo },
        { title: '招聘省市', content: recruitStr || '暂未公布' }
      ];

      // ===== TODO: ↑↑↑ 以上 mock 数据请替换为实际接口请求 ↑↑↑ =====

      this.company = mockData;
    },
    goToJobDetail(id) {
      if (!id) return;
      uni.navigateTo({ url: `/pages/job-detail/index?id=${id}` });
    },
  },
  computed: {
  }
}
</script>

<style scoped>
/* 顶部导航 */
.header {
  position: relative; /* 为返回按钮提供定位上下文 */
  background: transparent;
  padding: 110rpx 36rpx 40rpx; /* 增加头部内边距，给标题更多空间 */
  color: #333333;
  display: flex;
  justify-content: center; /* 标题居中 */
  align-items: center;
}

.back-button {
  position: absolute;
  top: 98rpx; /* 与header新的padding-top对齐 */
  left: 36rpx; /* 与header的padding-left对齐 */
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
  text-align: center;
  flex: 1;
}

.company-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  color: #333;
  padding-bottom: 32rpx;
}
.header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24rpx;
  height: 88rpx;
}
.back-btn {
  position: relative;
  left: 30rpx;
  width: 52rpx;
  height: 52rpx;
  z-index: 1;
  margin-top: 100rpx;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.back-btn:active {
  opacity: 1;
}
.back-arrow {
  font-size: 36rpx;
  color: #13c2a3;
  font-weight: bold;
}
.back-arrow-img {
  width: 36rpx;
  height: 36rpx;
  display: block;
}
.spacer {
  flex: 1;
}
.iconfont.icon-star {
  font-size: 36rpx;
  color: #fff;
}
.company-header {
  display: flex;
  flex-direction: row;
  place-items: center;
  align-items: center;
  padding: 32rpx 32rpx 8rpx 32rpx;
  gap: 16rpx;
}
.company-logo {
  width: 110rpx;
  height: 110rpx;
  border-radius: 20rpx;
  object-fit: cover;
  margin-left: 0;
  margin-top: 12px;
  box-shadow: 0 12rpx 28rpx rgba(0,0,0,0.35);
  border: 2rpx solid rgba(255,255,255,0.2);
}
.company-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16rpx;
  gap: 6rpx;
}

.company-name {
  font-size: 44rpx;
  font-weight: 800;
  color: #333;
  margin-top: 8rpx;
}
.company-type {
  font-size: 28rpx;
  color: #666;
  margin-bottom: -2rpx;
  margin-top: 2px;
}
.company-tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 12rpx 0 6rpx;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 0 30rpx;
}
.tag {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 14rpx;
  margin-right: 0;
  margin-bottom: 8rpx;
  border: 1rpx solid rgba(16, 185, 129, 0.1);
}
.company-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 0 30rpx;
  margin-top: 6rpx;
}
.label {
  background: rgba(0, 179, 134, 0.18);
  color: #059669;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 14rpx;
  border: 1rpx solid rgba(0, 212, 163, 0.35);
}
.section {
  margin: 28rpx 24rpx 0 24rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.section-title {
  font-size: 30rpx;
  font-weight: 800;
  margin-bottom: 12rpx;
  color: #333; 
}
.section-content {
  font-size: 26rpx; 
  color: #666; 
  line-height: 1.8;
  white-space: pre-line; 
  background: rgba(16, 185, 129, 0.05);
  border: 1rpx solid rgba(16, 185, 129, 0.1);
  border-radius: 16rpx;
  padding: 18rpx;
} 
.job-card {
  background: #fff;
  border-radius: 22rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #eef2f7;
}
.job-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.job-title {
  font-size: 32rpx;
  font-weight: 800;
  color: #222;
}
.job-salary {
  color: #ff2d2d;
  font-size: 32rpx;
  font-weight: 800;
}
.job-company-row {
  flex-direction: row;
  place-items: center;
  margin: 16rpx 0;
}
.company {
  color: #666;
  font-size: 26rpx;
  margin-right: 16rpx;
}
.job-tag {
  background: #f4f6f9;
  color: #6b7682;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 12rpx;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}
.job-meta {
  display: flex;
  flex-direction: row;
  color: #98a1ab;
  font-size: 22rpx;
  gap: 24rpx;
}
</style> 